<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>Title</title>
    <!--  mui  -->
    <link rel="stylesheet" href="./mui/mui.min.css">

    <style>
        html,
        body,
        #app{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .video-box{
            width: 100%;
            /* line-height: 300px; */
            align: center;
            /* margin: 0 auto; */
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        #video{
            width: 100%;
        }

        .content{
            /*position:absolute;*/
            /*top:44px;*/
            margin-top: 44px;
            width: 100%;
            /*height: calc( 100% - 44px);*/
        }

        .camera-list{
            height: calc(100% - 44px - 300px - 100px);
            overflow: scroll;
            width: 100%;
            position: absolute;
        }

        .center-content{
            height: 100px;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            width: 100%;
            background-color: rgb(245,245,245);
        }

        .center-content>div{
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;
        }

        .center-icon{
            height: 3rem;
            width: 3rem;
            /* text-align: center; */
            border: 1px solid rgb(156,182,159);
            line-height: 2.5rem;
            border-radius: 27px;
        }

        .center-text{
            margin-top: 5px;
        }

        .center-icon-img{
            width: 2rem;
        }

        .center-content-position{
            position: absolute;
            bottom: 0;
        }

        .big-box{
            display: flex;
            height: 44px;
            /* line-height: inherit; */
            align-items: center;
            position: absolute;
            right: 11px;
        }
    </style>
    <!--mui-->
    <script src="./mui/mui.min.js"></script>
    <!--  vue  -->
    <script src="./vue/vue.js"></script>
    <!--hls-->
    <script src="./hls/hls.js"></script>

    <!-- layui-->
    <link rel="stylesheet" href="./layui-v2.5.6/layui/css/layui.css">
    <script src="./layui-v2.5.6/layui/layui.js"></script>
</head>
<body>
<div id="app">
    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">{{headLine}}</h1>
        <div class="big-box" onclick="fullScreen()">
            <img src="./icon/放大.png" alt="" style="width: 1.5rem">
        </div>
    </header>
    <div class="content">
        <div class="video-box" >
            <video id="video" autoplay="autoplay" controls="controls" style="height: 300px"></video>
        </div>
        <div :class="{'center-content':'true','center-content-position': isPosition}" >
            <div>
                <div class="center-icon">
                    <img src="./icon/图片4.png" alt="" class="center-icon-img">
                </div>
                <div class="center-text">抓拍</div>
            </div>
            <div>
                <div class="center-icon">
                    <img src="./icon/图片3.png" alt="" class="center-icon-img">
                </div>
                <div class="center-text">回放</div>
            </div>
            <div onclick="playVideo()">
                <div style="height: 3.5rem;width: 3.5rem;line-height: 4;border: 1px solid rgb(156,182,159);border-radius: 27px; display: flex;text-align: center;align-items: center;justify-content: center;margin-top: -20px">
                    <img src="./icon/图片2.png" alt="">
                </div>
            </div>
            <div>
                <div class="center-icon">
                    <img src="./icon/图片5.png" alt="" class="center-icon-img">
                </div>
                <div class="center-text">云台</div>
            </div>
            <div @click="removerCameraList">
                <div class="center-icon">
                    <img src="./icon/123.png" alt="" class="center-icon-img">
                </div>
                <div class="center-text">缩小</div>
            </div>
        </div>
        <div class="camera-list" :style="{display: cameraListDisplay}">
            <!--<ul class="mui-table-view" v-for="item in listParam" @click="changeUrl(item.url)" onclick="change()">
                <li class="mui-table-view-cell mui-collapse" >
                    {{item.name}}
                </li>
            </ul>-->
            <table class="layui-table">
                <tr v-for="item in listParam" @click="changeUrl(item.url)">
                    <td>{{item.name}}</td>
                </tr>

            </table>
        </div>
    </div>
</div>
    <script src="./video.js"></script>
</body>
</html>
